<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/sytle.css">
<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<title>我的订单</title>
<style>
* {
	background: #f6f6f6;
}
</style>
</head>
<body>
	<div class="hgj">
		<div class="page-all">
			<div class="container">
				<!--内容开始-->
				<!--订单头部分类-->
				<header>
					<div class="navbar">
						<div class="navbar-choose">
							<label>订单类型：</label> <select name="order-type" id="status" onchange="ref()">
								<option value="0">全部订单</option>
								<option value="1">待付款</option>
								<option value="3">待服务</option>
								<option value="8">待验收</option>
								<option value="4">退款中</option>
								<option value="6">已结束</option>
							</select>
						</div>
					</div>
				</header>
				<!--订单列表开始-->
				<div class="odr-list">
					<c:forEach items="${ORDER_LIST}" var="order">
						<div class="odr-top">
							<span class="odr-type">${order.wOServiceName}</span>
							<span class="odr-step"> <c:if test="${order.status == 1}">待付款</c:if>
								<c:if test="${order.status == 2}">待服务</c:if> <c:if
									test="${order.status == 3}">待验收</c:if> <c:if
									test="${order.status == 4}">退款中</c:if></span> <a href="${pageContext.request.contextPath}/order/orderDetail/${order.id}.html"
								class="odr-more"><img
								src="${pageContext.request.contextPath}/images/right.png" /></a>
						</div>
						<div class="odr-middle">
							<c:if test="${order.wOServiceType == 0}">待服务<
							<p class="odr-time">
								<img
									src="${pageContext.request.contextPath}/images/odr-time.png" /><span>服务时间:<fmt:formatDate value="${order.orderDetailDO.wOSubscribe}" type="BOTH" dateStyle="full"/></span>
							</p>
							<p class="odr-address">
								<img
									src="${pageContext.request.contextPath}/images/odr-staff.png" /><span>服务人数:${order.orderDetailDO.wOStaffCount}人</span>
							</p>
							</c:if>
							<p class="odr-address">
								<img
									src="${pageContext.request.contextPath}/images/odr-address.png" /><span>服务地址:${order.orderDetailDO.wOAddress}</span>
							</p>
							<p class="odr-address">
								<img
									src="${pageContext.request.contextPath}/images/odr-fee.png" /><span>订单费用:${order.wOFee}元</span>
							</p>
						</div>
						<div class="odr-foot">
							<c:if test="${order.status == 1}">
								<a href="${pageContext.request.contextPath}/pay/info/${order.id}.html"  class="odr-red-btn">立即付款</a>
								<a href="javascript:void();" onclick="showDel(${order.id})"
									class="odr-gray-btn">删除订单</a>
							</c:if>
							<c:if test="${order.status == 2}">
								<div class="odr-foot">
									<a href="javascript:void();" onclick="cancelShow(${order.id})" class="odr-gray-btn">取消订单</a>
								</div>
							</c:if>
							<c:if test="${order.status == 3}">
								<div class="odr-foot">
									<a href="javascript:void();"
										onclick="confirmOrder(${order.id})" class="odr-red-btn">确认验收</a>
								</div>
							</c:if>
							<c:if test="${order.status == 4}">
								<a href="javascript:void();" onclick="showDel(${order.id})"
									class="odr-gray-btn">删除订单</a>
							</c:if>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
		<!--原因弹窗-->
		<footer class="footer-foot">
				<ul class="footer-icon">
					<li><a href="/"><img src="${pageContext.request.contextPath}/images/index-icon.png"/><span style="margin-top:0px;">首页</span></a></li>
					<li><a href="${pageContext.request.contextPath}/order/userOrders/0/1.html"><img src="${pageContext.request.contextPath}/images/order-selected-icon.png"/><span class="be-now" style="margin-top:0px;">订单</span></a></li>
					<li><a href="${pageContext.request.contextPath}/need/userNeeds/0/1.html"><img src="${pageContext.request.contextPath}/images/packets-icon.png"/><span style="margin-top:0px;">需求</span></a></li>
					<li><a href="${pageContext.request.contextPath}/members/accountInfo.html"><img src="${pageContext.request.contextPath}/images/mine-icon.png"/><span style="margin-top:0px;">我的</span></a></li>
				</ul>
			</footer>
			<!--删除订单弹窗-->
 <div class="mask_delete" style="display: none;" id="delInfo">
	<div class="popup_del">
		<h3 class="popup_title">确定要删除订单吗？</h3>
		<div class="popup_choose clearfix">
			<button class="popup_choose_cancel" onclick="closeDelInfo()">取消</button>
			<button class="popup_choose_sure" onclick="del()">确定</button>
		</div>
	</div>
</div>
<!--原因弹窗-->
<div class="mask_reasons" style="display: none;" id="cancelInfo">
	<div class="popup_why">
		<ul>
			<li onclick="cancel(0)">时间定错了</li>
			<li onclick="cancel(1)">地点定错了</li>
			<li onclick="cancel(2)">未准时到达</li>
			<li onclick="cancel(3)">暂不需要了</li>
			<li onclick="cancel(4)">其他原因</li>
		</ul>
	</div>
</div>
	</div>
</body>
<script type="text/javascript">
	$(function(){
	   $("#status").val(${status});
   }); 
	var id = 0;
	function cancelShow(v) {
		id = v;
		$("#cancelInfo").show();
	}
	function cancel(index) {
		
		$.ajax({
			url : "${pageContext.request.contextPath}/order/cancel/" + id + "/"
					+ index + ".json",
			success : function(data) {
				if (data != 0) {
					
				}
				//点击后刷新页面
				window.location.reload();
			}
		});
	}

	function confirmOrder(id) {
		var mes = confirm('是否确认订单！');
		if (mes == true) {
			$.ajax({
						url : "${pageContext.request.contextPath}/order/confirmOrder/"
								+ id + ".json",
						success : function(data) {
							if (data != 0) {
								window.location.reload();
							}
						}
					});
		}
	}
	
	function closeDelInfo() {
		$("#delInfo").hide();
	}

	//删除订单
	function del() {
		$.ajax({
					url : "${pageContext.request.contextPath}/order/del/" + id
							+ ".json",
					success : function(data) {
						if (data != 0) {
							window.location.reload();
						}
					}
				});

	}

	//删除订单
	function showDel(v) {
		id = v
		$("#delInfo").show();
	}
	

	function ref() {
		 var myselect = document.getElementById("status");
		 var index = myselect.selectedIndex;
		 var s = myselect.options[index].value;
		 window.location.href="${pageContext.request.contextPath}/order/userOrders/" + s + "/1.html"
	}
	//showId表示弹出层的divId,backId表示遮罩层的divId;

	/* function del(showId,backId){
		document.getElementById(showId).style.display = 'block';
		document.getElementById(showId).style.display = 'block';
		
		var backdiv = document.getElementById(backId);
		backId.style.width = document.body.scrollWidth;
		$("#"+backId).height($(document).height());
	} */

	//关闭弹框
	/*function hideDiv(showId,backId){
		//关闭弹出层
		document.getElementById(showId).style.display = 'none';
		//关闭遮罩层
		document.getElementById(backId).style.display = 'none';
	}*/
</script>
</html>
